import {reactive,onMounted} from 'vue'
import axios, {AxiosError} from 'axios'

export default function(){

    const dogList = reactive<string[]>([])

    async function getDog(){
        try {
            // 发送请求 
            //{data} 是解构语法 用于提取出后面那一坨返回中的 data 属性
            const {data}  = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')

            console.log("获得一只狗:",{data})
            //装入容器
            dogList.push(data)
        } catch (error) {
            //处理错误 这里带个尖括号是指定了泛型么
            const err =  <AxiosError>error
            console.log(err.message)
        }
    }


    //挂载钩子
    onMounted(()=>{
        getDog()
    })



    //返回对象 即可以返回对象 又可以返回函数 这是向外部暴露数据？？
    return {dogList,getDog}

}